<script lang="ts" setup>
import ImageIntroduction from './comp/ImageIntroduction.vue'
import img1 from '@/assets/img/BlockchainGame/by.gif'
import img2 from '@/assets/img/BlockchainGame/yx.png'
import img3 from '@/assets/img/BlockchainGame/xx.png'
import img4 from '@/assets/img/BlockchainGame/ty.gif'
import { Toast } from 'vant'
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import BgVue4 from '@/components/BgVue4.vue'

const { t } = useI18n()

const list = ref([
  {
    title: 'game.fishing',
    image: img1,
    //video: video1,
    introduce: `game.contents`,
  },
  {
    title: 'game.Leisure',
    image: img2,
    introduce: `game.LeisureC`,
  },
  {
    title: 'game.Chess',
    image: img3,
    introduce: 'game.ChessC',
  },
  {
    title: 'game.Sports',
    image: img4,
    introduce: `game.SportsC`,
  },
])

function handleClick() {
  Toast.fail(t('game.development'))
}
</script>
<template>
  <BgVue4>
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="BlockchainGame">
      <h2 class="title-style">{{ t('game.BG') }}</h2>
      <ImageIntroduction
        v-for="(item, index) in list"
        :key="index"
        v-bind="item"
        @click="handleClick"
      >
      </ImageIntroduction>
    </div>
  </BgVue4>
</template>

<style lang="less" scoped>
.BgVue2 {
  position: relative;
  :deep(.content) {
    // position: relative;
    padding-top: 62px;
    padding-bottom: 80px;
    margin-top: -76px;
    // z-index: 1;
    background-image: linear-gradient(0deg, #177dcf 0%, #50abf6 100%);
  }

  :deep(.bottomImg) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    // z-index: 1;
  }
}
.BlockchainGame {
  position: relative;
  z-index: 1;
  margin: 0 22px 50px;
  color: #f9a614;

  h2 {
    font-size: 21px;
    margin-top: 20px;
    margin-bottom: 0;
  }
}
</style>
